<template>
  <div class="main">
    <div class="head"> {{ pageData[0].MsgTitle}}
    </div>
    <div :class="dateClass">有效期至:&nbsp;{{formatDate(pageData[0].EffectDate)}}</div>
    <div class="content">
      {{ pageData[0].Content}}
    </div>
  </div>
</template>
 
<script>
import { Search, Tab, TabItem, Group, Cell, XButton, dateFormat } from 'vux'
import { PublicMsgZMService } from '../../service/Services.js'
import Utils from '../../utils/utils.js'

export default {
  name: 'CellBtn',
  components: {
    Search,
    Tab,
    TabItem,
    Group,
    Cell,
    XButton
  },
  data () {
    return {
      pageData: [],
      dateClass: 'div-date-over'
    }
  },
  methods: {
    loadData () {
      this.$vux.loading.show({
        text: '加载中...'
      })
      PublicMsgZMService.getPublicMsgZMDetail(this.$route.query.PublicMsgGUID).then((res) => {
        this.$vux.loading.hide()
        this.pageData = res.Data
        if (this.formatDate(this.pageData[0].EffectDate) < Utils.dateFormat(new Date(), 'yyyy-MM-dd')) { this.dateClass = 'div-date' }
      }).catch((res) => {
        this.$vux.toast.show({
          text: '请求失败,请联系管理员',
          type: 'cancel',
          width: '180px'
        })
      })
    },
    formatDate (myDate) {
      var msec = myDate.match(/\d+[+]\d+/gi)
      return dateFormat(new Date(Number.parseInt(msec)), 'YYYY-MM-DD')
    }
  },
  created () {
    this.loadData()
  }
}
</script>

<style scoped lang='less'>
.main {
  box-sizing: border-box;
  word-wrap: break-word;
  width: 100%;
  height: 100%;
  padding: 20px;
  background-color: #fff;
  overflow-y: auto;
}

.head {
  font-weight: bold;
  display: block;
  font-family: PingFangSC-Regular;
  font-size: 18px;
  color: #111111;
}

.content {
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #222222;
  letter-spacing: 0;
  line-height: 30px;
}

.div-date {
  margin: 20px 0;
  font-size: 14px;
}

.div-date-over {
  color: #DC220B;
  margin: 20px 0;
  font-size: 14px;
}
</style>
